<template>
  <div id="app">
    <template v-if="route.path === '/login'">
      <router-view />
    </template>
    <template v-else>
      <el-container style="height: 100vh;">
        <!-- Header区域 -->
        <el-header class="header">
          <div class="header-left">
            <div class="logo">
              <el-icon size="32" color="#409EFF">
                <Monitor />
              </el-icon>
              <span class="title">宜宾矿山安全大模型系统</span>
            </div>
          </div>

          <div class="header-center">
            <el-menu :default-active="activeMenu" mode="horizontal" router class="main-menu">
              <el-menu-item index="/">
                <el-icon>
                  <House />
                </el-icon>
                <span>首页</span>
              </el-menu-item>
              <el-menu-item index="/monitor">
                <el-icon>
                  <VideoCamera />
                </el-icon>
                <span>实时监控</span>
              </el-menu-item>
              <el-menu-item index="/alarm">
                <el-icon>
                  <Warning />
                </el-icon>
                <span>AI告警</span>
              </el-menu-item>
              <el-menu-item index="/history">
                <el-icon>
                  <Clock />
                </el-icon>
                <span>历史回放</span>
              </el-menu-item>
              <el-sub-menu index="/settings">
                <template #title>
                  <el-icon>
                    <Setting />
                  </el-icon>
                  <span>管理设置</span>
                </template>
                <el-menu-item index="/settings/mine">矿山管理</el-menu-item>
                <el-menu-item index="/settings/site">站点管理</el-menu-item>
                <el-menu-item index="/settings/device">设备管理</el-menu-item>
                <el-menu-item index="/settings/alarm">告警管理</el-menu-item>
                <el-menu-item index="/settings/user">用户管理</el-menu-item>
              </el-sub-menu>
            </el-menu>
          </div>

          <div class="header-right">
            <el-dropdown>
              <span class="user-info">
                <el-avatar size="small" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
                <span>管理员</span>
                <el-icon>
                  <ArrowDown />
                </el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item>个人信息</el-dropdown-item>
                  <el-dropdown-item>修改密码</el-dropdown-item>
                  <el-dropdown-item divided @click="handleLogout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </el-header>

        <!-- 主要内容区域 -->
        <el-main class="main-content">
          <router-view />
        </el-main>
      </el-container>
    </template>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessageBox } from 'element-plus'

const route = useRoute()
const router = useRouter()
const activeMenu = computed(() => route.path)

// 退出登录
const handleLogout = () => {
  ElMessageBox.confirm(
    '确定要退出登录吗？',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    // 清除登录状态
    localStorage.removeItem('isLoggedIn')
    localStorage.removeItem('username')
    // 跳转到登录页
    router.push('/login')
  }).catch(() => {})
}
</script>

<style scoped>
.header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.header-left .logo {
  display: flex;
  align-items: center;
  gap: 10px;
}

.title {
  font-size: 20px;
  font-weight: bold;
}

.header-center {
  flex: 1;
  display: flex;
  justify-content: center;
}

.main-menu {
  background: transparent;
  border: none;
  padding: 0 10px;
  justify-content: center;
  width: 100%;
}

.main-menu :deep(.el-menu-item) {
  margin: 0 5px;
  border-radius: 6px 6px 0 0;
}

.main-menu .el-menu-item {
  color: white;
  border-bottom: none;
  font-weight: 500;
  transition: all 0.3s ease;
}

.main-menu .el-menu-item:hover {
  background-color: rgba(255, 255, 255, 0.15);
  color: white;
  transform: translateY(-1px);
}

.main-menu .el-menu-item.is-active {
  background-color: rgba(255, 255, 255, 0.7);
  color: white;
  border-bottom: 3px solid #fff;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.header-right .user-info {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.header-right .user-info:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.main-content {
  background-color: #f5f7fa;
  padding: 20px;
  overflow-y: auto;
}
</style>